<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/templates/store.xhtml">
	<ui:define name="pageTitle">Mon profil</ui:define>
	<ui:define name="first">Mon profil utilisateur</ui:define>
	<ui:define name="body">
	
		<form>
			
			<fieldset>
				
				<legend>Informations personnelles</legend>
				
				<div class="row">
				
					<div class="small-2 columns">
					
						<label for="gender">Civilité</label>
						<select id="gender" name="gender">
							<option value="mme">Mme</option>
							<option value="melle">Melle</option>
							<option value="m">M</option>
						</select>
					</div>
				
					<div class="small-5 columns">
						<label>Prénom</label>
						<input type="text" placeholder="Prénom" name="firstname" />
					</div>
					
					<div class="small-5 columns">
						<label>Nom</label>
						<input type="text" placeholder="Nom" name="name" />
					</div>
				</div>
				
				<div class="row">
					
					<div class="small-4 columns">
						<label>Date de naissance (JJ/MM/AAAA)</label>
						<input type="date" placeholder="Date de naissance JJ/MM/AAAA" name="birthdate" />
					</div>
					
					<div class="small-4 columns">
						<label>Téléphone</label>
						<input type="tel" name="phone" placeholder="Téléphone"
						pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" />
					</div>
					
					<div class="small-4 columns">
						<label class="invisible">Newsletter</label>
						<input type="checkbox" id="newsletter" name="newsletter" />
						<label for="newsletter" class="display">M'inscrire à la newsletter</label>
					</div>
					
				</div>
				
			</fieldset>
			
		
			<fieldset>
			
				<legend>Informations de connexion</legend>
				<strong>Rappel : le mot de passe d'une longueur entre 8 et 25 caractères doit comprendre AU MOINS un chiffre (0-9) ET un caractère spécial (#~!:;.,?&#38;) ET un caractère a-zA-Z</strong>
				
				<div class="row">
				
					<div class="small-4 columns">
						<label>Nouveau mot de passe</label>
						<input type="password" placeholder="Nouveau mot de passe" />
					</div>
				
					<div class="small-4 columns">
						<label>Confirmer nouveau mot de passe</label>
						<input type="password" placeholder="Confirmer nouveau mot de passe" />
					</div>
				
					<div class="small-4 columns">
						<label>Ancien mot de passe pour valider les changements</label>
						<input type="password" placeholder="Ancien mot de passe" />
					</div>
					
				</div>
				
				<div class="row">
					<div class="small-6 columns">
						<label>Email</label>
						<input type="email" placeholder="Email" name="email" />
					</div>
					
					<div class="small-6 columns">
						<input type="submit" value="Valider" />
					</div>
				</div>
				
				
			</fieldset>
		</form>
	
	</ui:define>
</ui:composition>
</html>